import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image ,Input} from '@tarojs/components'
import './Photograph.css'
import { AtAvatar, AtList, AtInput, AtButton} from "taro-ui"
import app from '../../main';

export default class Photograph extends Component {

    config = {
      navigationBarTitleText: '拍照',
      navigationBarBackgroundColor: "#000000",
      navigationBarTextStyle: "white",
    }
    constructor () { 
      super(...arguments); 
      this.state = {
        frame:'https://zhongsheng.bayou-tech.cn/img/imgs/frame.png',
        cicle:'https://zhongsheng.bayou-tech.cn/img/imgs/cicle.png',
        style:'font-size:14px; color:white; line-height:30px;',
        src: '',
        show:1,
        flag:false
      }
      this.ctx = wx.createCameraContext()
    }

    takePhoto() {
        this.ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setState({
                    src: res.tempImagePath,
                    show:2
                })
            }
        })
        this.setState({
            flag:true
        })
    }

    reset(){
        this.setState({
            show:1,
            flag:false
        })
    }

    //跳转到识别中
    gotoLoading(){
        if(this.$router.params.id == 10){
            app.redirectTo('../loading/loading?src='+this.state.src + '&id='+ '10')
        }else if(this.$router.params.id == 20){
            app.redirectTo('../loading/loading?src='+this.state.src + '&id='+ '20')
        }else{
            app.redirectTo('../loading/loading?src='+this.state.src)
        }
        
    }
 
    render () {
      return (
        <View className='index'>

            <View className='box'>           
                <View style={this.state.style}>请调整与镜头的距离,使人脸尽量完整的填完整个大方框,眼睛要正视前方，并且要睁大</View>
            </View>

            <Image className='frame' src={this.state.frame}/>
            {
                this.state.show == 1 
                &&
                <camera class='cemera' device-position="front" flash="auto" binderror="error" />
            }
            <cover-image class='images' src={this.state.src} style={this.state.flag ? 'display:block' : 'display:none'}></cover-image>

            <View className='cicleBox' style={this.state.show == 1 ? 'display:block' : 'display:none'}>
                <Image className='cicle' src={this.state.cicle} onClick={this.takePhoto} />
            </View>

            <View className='btnbox' style={this.state.show == 2 ? 'display:block' : 'display:none'}>
                <AtButton className='btn' type='primary' onClick={this.reset.bind(this)}>再拍一次</AtButton>
                <AtButton className='btn' type='primary' onClick={this.gotoLoading.bind(this)}>确定</AtButton>
            </View>

        </View>
      )
    }
  }
  
  